// 页面中的数据
var data = [
    { id: 1, name: '张宇', sex: '男', tel: '13411111111', address: '四川省绵阳市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 2, name: '五月', sex: '男', tel: '13411111112', address: '四川省德阳市xxxxxx', person_type: '一般接触人员', task_type: '其他', d_group: '密接排查组', functionary: '张三', status: '已完成' },
    { id: 3, name: '赵某', sex: '女', tel: '13411111113', address: '四川省成都市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '李四', status: '已完成' },
    { id: 4, name: '谢某', sex: '女', tel: '13411111114', address: '四川省泸州市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 5, name: '吴某', sex: '男', tel: '13411111115', address: '四川省雅安市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 6, name: '王某', sex: '女', tel: '13411111116', address: '四川省广元市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 7, name: '李某', sex: '女', tel: '13411111117', address: '四川省资阳市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 8, name: '刘某', sex: '男', tel: '13411111118', address: '四川省遂宁市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 9, name: '刁某', sex: '男', tel: '13411111119', address: '四川省达州市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 10, name: '孙某', sex: '女', tel: '1341111120', address: '四川省绵阳市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 11, name: '钱某某', sex: '女', tel: '13411111121', address: '四川省攀枝花市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 12, name: '欧阳某某', sex: '男', tel: '13411111122', address: '四川省内江市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 13, name: '上官某', sex: '女', tel: '13411111123', address: '四川省宜宾市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 14, name: '慕容某', sex: '男', tel: '13411111124', address: '四川省乐山市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 15, name: '宣谋某', sex: '女', tel: '13411111125', address: '四川省自贡市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 16, name: '轩辕某某', sex: '女', tel: '13411111126', address: '四川省南充市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 17, name: '陆某某', sex: '女', tel: '13411111127', address: '四川省巴中市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 18, name: '翟某', sex: '男', tel: '13411111128', address: '四川省眉山市xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 19, name: '安某', sex: '男', tel: '13411111129', address: '四川省阿坝藏族羌族自治州xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 20, name: '林某', sex: '男', tel: '13411111130', address: '四川省甘孜藏族自治州xxxxxx', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
    { id: 21, name: '杜某', sex: '男', tel: '13411111131', address: '四川省凉山彝族自治州', person_type: '密接人员', task_type: '120转运', d_group: '120转运组', functionary: '', status: '待分配' },
];
// 当前页码
var page = 1;
// 每页的条数
var count = 6;
// 获取tbody
var oTBody = document.querySelector('tbody');
// 获取分分页器
var oPagination = document.querySelector('.pagination');
// 获取上一页的按钮
var oPrevBtn = document.querySelector('.prev')
// 获取下一页的按钮
var oNextBtn = document.querySelector('.next')
//获取搜索的输入框
var oSearchInp = document.querySelector('.searchInp')
// 获取搜索的按钮
var oSearchBtn = document.querySelector('.searchBtn')
//  获取添加的保存按钮
var oAddSaveBtn = document.querySelector('.addSaveBtn')
var oEditSaveBtn = document.querySelector('.editSaveBtn')
// 页面初始化渲染
function render() {
    // 输入框内容
    var str = oSearchInp.value;

    // 搜索的数据
    var searchData = [];

    if (str.trim() == '') {
        searchData = data;
    } else {
        for (var i = 0; i < data.length; i++) {
            if (data[i].name.includes(str)) {
                searchData.push(data[i])
                console.log(searchData)

            }
        }
    }
    // console.log(data)
    oTBody.innerHTML = ''
    var renderArr = searchData.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
        var oTr = document.createElement('tr')
        oTr.innerHTML = `
            <td>${renderArr[i].id}</td>
            <td>${renderArr[i].name}</td>
            <td>${renderArr[i].sex}</td>
            <td>${renderArr[i].tel}</td>
            <td>${renderArr[i].address}</td>
            <td>${renderArr[i].person_type}</td>
            <td>${renderArr[i].task_type}</td>
            <td>${renderArr[i].d_group}</td>
            <td>${renderArr[i].functionary}</td>
            <td>${renderArr[i].status}</td>
            <td>
                <button class="btn btn-primary edit">编辑</button>
            <button class="btn btn-danger del">删除</button>
            </td>

        `;
        oTBody.appendChild(oTr)
    }
    // console.log(oTBody)
    // 渲染页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    // 删除所有页码
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode)
    }
    for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
        var oLi = document.createElement('li')
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        if (i == page) {
            oLi.classList.add('active')
        }
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
// 渲染数据
render();
oPagination.addEventListener('click', changePage);
function changePage() {
    if (event.target.className == 'pageBtn') {
        page = event.target.innerText;
        //渲染分页
        render();
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(data.length / count)) {
        page++;
        render();
    }
}
//删除功能
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        var id = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                data.splice(i, 1);
            }
        }
        $('#delModal').modal('show');
        var oSure = document.querySelector('.d-sure')
        oSure.onclick=function(){
             //让模态框隐藏
             $('#delModal').modal('hide')
             //重新渲染
             render();
        }

    }
}
//搜索
oSearchBtn.addEventListener('click', searchFn);
function searchFn() {
    page = 1;
    render();
}
//添加
oAddSaveBtn.addEventListener('click', addFn);
function addFn() {
    var addId = document.querySelector('.addId').value;
    var addName = document.querySelector('.addName').value;
    var addSex = document.querySelector('#inlineRadio1').checked ? '男' : '女';
    var addTel = document.querySelector('.addTel').value;
    var addAddress = document.querySelector('.addAddress').value;
    var addPerson_type = document.querySelector('.addPerson_type').value;
    var addTask_type = document.querySelector('.addTask_type').value;
    var addD_group = document.querySelector('.addD_group').value;
    var addFunctionary = document.querySelector('.addFunctionary').value;
    var addStatus = document.querySelector('.addStatus').value;
    console.log(addSex);


    data.push({
        id: addId,
        name: addName,
        tel: addTel,
        sex: addSex,
        address: addAddress,
        person_type: addPerson_type,
        task_type: addTask_type,
        d_group: addD_group,
        functionary: addFunctionary,
        status: addStatus,
    })

    render();
    $('#addModal').modal('hide')
}
//给所有的编辑按钮加事件
oTBody.addEventListener('click', openEdit);
function openEdit() {
    if (event.target.className.includes('edit')) {
        $('#editModal').modal('show');
        var id = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value = data[i].id;

                document.querySelector('.editName').value = data[i].name;

                if (data[i].sex == '女') {
                    document.querySelector('#editRadio2').checked = true;
                }


                document.querySelector('.editTel').value = data[i].tel;
                document.querySelector('.editAddress').value = data[i].address;

                document.querySelector('.editPerson_type').value = data[i].person_type;
                document.querySelector('.editTask_type').value = data[i].task_type;
                document.querySelector('.editD_group').value = data[i].d_group;
                document.querySelector('.editFunctionary').value = functionary;
                document.querySelector('.editStatus').value = data[i].status;
            }
        }
    }

}

//点击修改保存
oEditSaveBtn.addEventListener('click', editSave);
function editSave() {
    var id = document.querySelector('.editId').value;
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
            data[i].name = document.querySelector('.editName').value;
            data[i].tel = document.querySelector('.editTel').value;
            data[i].sex = document.querySelector('#editRadio1').checked ? '男' : '女';
            data[i].address = document.querySelector('.editAddress').value;
            data[i].person_type = document.querySelector('.editPerson_type').value;
            data[i].task_t = document.querySelector('.editTask_type').value;
            data[i].d_group = document.querySelector('.editD_group').value;
            data[i].functionary = document.querySelector('.editFunctionary').value;
            data[i].sStatus = document.querySelector('.editStatus').value;

        }
    }
    //关闭弹框
    $('#editModal').modal('hide');
    //重新渲染
    render();
}



var oExcel = document.querySelector('.d-excel')
console.log(oExcel)


oExcel.onclick = function () {
    toExcel()
}

//导出excel
function toExcel() {

    var blob = sheet2blob(XLSX.utils.table_to_sheet($('table')[0]));
    //设置链接
    var link = window.URL.createObjectURL(blob);
    var a = document.createElement("a");    //创建a标签
    a.download = "指挥调度详情.xlsx";                //设置被下载的超链接目标（文件名）
    a.href = link;                            //设置a标签的链接
    document.body.appendChild(a);            //a标签添加到页面
    a.click();                                //设置a标签触发单击事件
    document.body.removeChild(a);            //移除a标签
}


// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = XLSX.write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    // 字符串转ArrayBuffer
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}





